<template>
  <div>
    <el-container>
      <el-header style="height: 8px">
        <el-row type="flex" justify="space-between">
          <div></div>
          <el-button
            type="primary"
            @click="addBtn()"
            size="mini"
            icon="el-icon-edit"
            >添加</el-button
          >
        </el-row>
      </el-header>
      <el-main>
        <template>
          <el-table :data="newMenuLists" style="width: 100%">
            <el-table-column label="标题" width="200">
              <template slot-scope="scope">
                <i
                  v-if="scope.row.childs"
                  class="el-icon-folder-opened"
                  :id="'textIndex' + scope.row.type"
                ></i>
                <i
                  v-else-if="scope.row.is_point"
                  class="el-icon-view"
                  :id="'textIndex' + scope.row.type"
                ></i>
                <i
                  v-else
                  class="el-icon-document-checked"
                  :id="'textIndex' + scope.row.type"
                ></i>
                <span style="margin-left: 10px">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="权限点代码" min-width="200">
              <template slot-scope="scope">
                <p>{{ scope.row.code }}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="260" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-main>
    </el-container>
    <!--弹框-->
    <user-add
      v-if="dialogVisible"
      :text="text"
      :pageTitle="pageTitle"
      @handleCloseModal="cancelMenu"
      :treeStructure="disabled"
      :menuLists="menuLists"
      :clickId="modify"
    ></user-add>
    <!--/弹框-->
  </div>
</template>

<script>
import userAdd from '../components/menu-add'
import { list, remove } from '@/api/base/menus'
export default {
  name: 'menus',
  inject: ['reload'],
  components: {
    userAdd
  },
  data () {
    return {
      menuLists: [],
      newMenuLists: [],
      dialogVisible: false, // 控制对话框的隐藏于显示
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      treeStructure: true,
      text: '创建',
      pageTitle: '菜单',
      disabled: false,
      modify: 0
    }
  },
  created () {
    this.getMenuList()
  },

  methods: {
    addBtn () {
      this.dialogVisible = true
      this.showLayer = true
      this.disabled = false
    },
    async getMenuList () { // 菜单列表
      const { data } = await list()
      this.menuLists = data
      data.forEach(item => { // 遍历数组 追加到新的空数组
        item.type = 0
        this.newMenuLists.push(item)
        if (item.childs) { // 如果遍历后得到的item还有子项继续遍历子项
          for (const key in item.childs) {
            item.childs[key].type = 1
            this.newMenuLists.push(item.childs[key]) // 遍历得到的子项添加到新的数组 ..
            if (item.childs[key].points) {
              for (const keys in item.childs[key].points) {
                item.childs[key].points[keys].type = 2
                this.newMenuLists.push(item.childs[key].points[keys])
              }
            }
          }
        }
      })
    },
    handleNodeClick (data) { // 树形
      console.log(data)
    },
    cancelMenu () { // 隐藏添加弹出层
      this.dialogVisible = false
      this.newMenuLists = []
      this.getMenuList() // 弹出层隐藏后重新获取数据
    },
    handleEdit (index, value) { // 修改
      console.log(index, value.id)
      this.modify = value.id // 获取点击修改的当前信息的id
      this.dialogVisible = true
      this.disabled = true
    },
    handleDelete (index, value) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteMenus(value.id)
        this.$message({
          type: 'success',
          message: '成功删除了用户!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作!'
        })
      })
    },

    async deleteMenus (id) {
      // 删除菜单项
      console.log(id)
      await remove({ id })
      // const NewPage = '_empty' + '?time=' + new Date().getTime() / 500
      // this.$router.push(NewPage)
      // this.$router.go(-1)
      // this.reload()
      this.newMenuLists = []
      this.getMenuList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  margin: 20px 20px;
  padding: 20px 20px;
  background-color: #fff;

  .el-header {
    padding: 0;
  }

  .el-main {
    padding: 20px 0;

    i {
      font-size: 18px;
    }

    #textIndex0 {
      text-indent: 0;
    }

    #textIndex1 {
      text-indent: 2em;
    }

    #textIndex2 {
      text-indent: 4em;
    }
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
